<html>

<head>
  <title>HTML 文档结构</title>
</head>

<body>
  <div class="group">
    <!-- 输入框 -->
    <input type="text" class="todovalue" name="todovalueName" id="todovalueID" placeholder="请输入TODO内容"
      onchange="valueChange(event)" onkeydown="valueChange(event)" />
    <input type="button" value="BUTTON1" onclick="handleClick()"></input>
    <button type="button" id="button2">BUTTON2</button>

    <!-- 遍历数据 -->
    <div id="todoList">
      <div class="item" id="item0">
        <input class="item-chk" type="checkbox" />
        <div class="item-sp">吃饭0</div>
        <input id="item-del-0" class="item-del" type="button" value="删除" onclick="handleDelClick(0)"></input>
      </div>
      <div class="item" id="item1">
        <input class="item-chk" type="checkbox" />
        <div class="item-sp">吃饭1</div>
        <input id="item-del-1" class="item-del" type="button" value="删除" onclick="handleDelClick(1)"></input>
      </div>
      <div class="item" id="item2">
        <input class="item-chk" type="checkbox" />
        <div class="item-sp">吃饭2</div>
        <input id="item-del-2" class="item-del" type="button" value="删除" onclick="handleDelClick(2)"></input>
      </div>
      <div class="item" id="item3">
        <input class="item-chk" type="checkbox" />
        <div class="item-sp">吃饭3</div>
        <input id="item-del-0" class="item-del" type="button" value="删除" onclick="handleDelClick(3)"></input>
      </div>
    </div>
    <!-- 操作的footer -->
    <!-- ctrl+斜杠为注释 -->
  </div>
</body>
<style>
  /* 调整文本框的颜色和状态 */
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }

  .group {
    border: 1px solid #c295e5;
    padding: 10px;
    border-radius: 20px;
  }

  .item {
    /* display: none;
      opacity: 0; */
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
    display: flex;
    align-items: center;
  }

  .item:hover {
    background-color: rgb(134, 238, 249);
    transform: scale(1.0001);
  }

  .item-sp {
    flex-grow: 1;
  }

  .item-del {
    background-color: #f98484;
    border: 0px;
    color: aliceblue;

    opacity: 0;
  }

  .item:hover .item-del {
    opacity: 1;
  }

  .todovalue {
    border: 2px solid #5ea6de;
    padding: 6px;
    outline: none;

  }

  .todovalue:focus {
    /* background-color: silver; */
    box-shadow: 0px 0px 5px #91a3cb;
    border: 2px solid #91a3cb;
    outline: none;
  }
</style>
<script lang="javascript">
  var index = 0;
  function init() {

    document.getElementById("button3").onclick = handleClick;
    // document.getElementById("input").keydown(function (event){
    //   if(event.KeyCode== 13){
    //     var v=document.getElementById("todovalueID").value;
    //     console.log(v);
    //   }
    // });
  }
  function valueChange(e) {
    console.log(e);
    if (event.keyCode == 13) {
      handleClick();
    }
  }
  function handleClick() {
    var temp = document.getElementsByName("todovalueName")[0].value;
    //alert("我被按了"+ temp);
    //var t =document.getElementById("todoList").innerHTML;
    // document.getElementById("todoList").innerHTML=t+ "<div>"+temp+"</div>";
    var div = document.createElement("div");
    div.innerText = temp;
    //document.getElementById("todoList").innerHTML +=div;
    document.getElementById("todoList").append(div);
  }
  function test1(index) {
    // console.log("进");
    // document.getElementById("todoList").children[index].style="background-color:silver";
    // document.getElementById("item-del-"+index).style ="opacity: 1;";
  }

  function test2(index) {
    // console.log("出");
    // document.getElementById("todoList").children[index].style="";
    // document.getElementById("item-del-"+index).style ="opacity: 0;";
  }
  function handleDelClick(index) {
    var arr = document.getElementById("todoList");
    console.log(arr);

    document.getElementById("item" + index).remove();

  }
  init();
    //alert("test")
</script>

</html>